<template>
  <div class="step3">
    <el-collapse class="collapse" v-model="activeCollapse">
      <el-collapse-item title="合同延期生成费用明细" name="1">
        <el-table :data="receivableFees">
          <el-table-column v-for="item in list" :key="item.prop" v-bind="item" :width="item.width || 180" :style="{backgroundColor:color(item.generateType)}" />
        </el-table>
      </el-collapse-item>

      <el-collapse-item title="已生成费用" name="2">
        <el-table :data="receivableFees2">
          <el-table-column v-for="item in list" :key="item.prop" v-bind="item" :width="item.width || 180" />
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'priceTotal',
  props: {
    //合同延期生成费用明细
    receivableFees: {
      type: Array,
      default: () => []
    },
    //已生成费用
    receivableFees2: {
      type: Array,
      default: () => []
    },
    // 场景
    scene: {
      type: String,
      default: 'rent'
    }
  },
  data () {
    return {
      // 费用预览手风琴
      activeCollapse: ["1"],

    }
  },
  computed: {
    list () {
      return this.scene == 'rent' ? [
        { prop: 'costMonth', label: '所属月份' },
        { prop: 'chargeProjectName', label: '收费项目' },
        { prop: 'costPeriodStart', label: '开始日期' },
        { prop: 'costPeriodEnd', label: '结束日期' },
        { prop: 'receivableDate', label: '应收日期' },
        { prop: 'receivableMoney', label: '应收金额', formatter: this.priceFormatter },
        { prop: 'generateRemark', label: '备注' },

      ] : [
        { prop: 'costMonth', label: '所属月份' },
        { prop: 'chargeProjectName', label: '收费项目' },
        { prop: 'costPeriodStart', label: '开始日期' },
        { prop: 'costPeriodEnd', label: '结束日期' },
        { prop: 'payableDate', label: '应付日期' },
        { prop: 'payableMoney', label: '应付金额', formatter: this.priceFormatter }
      ]
    }
  },
  methods: {
    color (v) {
      const colorList = {
        1: '',
        2: 'Gainsboro',
        3: 'red',
        4: '',
      }
      return colorList[v]
    }
  }
}
</script>

<style lang="scss" scoped>
.step3 {
  padding: 0px 22px 20px;
  text-align: left;
  min-height: 300px;
  /deep/ .el-collapse-item__header {
    color: #666666;
    font-weight: 600;
    line-height: 50px;
    font-size: 16px;
  }
}
</style>
